body{
	background-color: #BED2E7;
	margin:0px;
	font-family: Helvetica, Arial, sans-serif;
}
* {
  box-sizing: border-box; border-radius: 20px; text-align: left; color: #3B0024;
}/* universeller Selektor */

.container-grid{
  display: grid;
  /*height: 100vh;*/
  /*grid-template-columns: repeat (3,1Fr);*/
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 5em;
  /*grid-auto-rows: minmax(0px, 1fr);*/
  grid-template-rows: 0.2fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.2fr 0.2fr 1fr 0.6fr;
  grid-template-areas:
  	"topnav topnav topnav"
  	"content1 content2 content2"
  	"content4 content4 content3"
  	"content5 content6 content6"
  	"content10 content9 content7"
  	"content11 content11 content11"
  	"content12 content12 content12"
  	"content13 content14 content14"
  	"content15 content15 content15"
 	"content16 content17 content18"
  	"content8 content8 content8"
  	"footer footer footer";
  margin: 0px 100px 0px 100px;
}


h1 {font: 2.3vw Playfair display, bold, Verdana, sans-serif; line-height: 130%;}

h2 {font: 2.0vh Playfair display, bold, Verdana, sans-serif;line-height: 130%;}

h2.l {font: 2.5vh Playfair display, bold, Verdana, sans-serif; margin: 0px;line-height: 130%;}

h2.k {font: italic 2vmin Source, sans-serif;line-height: 150%; }

p {font: 2vmin Source, sans-serif, Arial, sans-serif; line-height: 150%;}

p.l {font: 1.8vmin Source, sans-serif, Arial, sans-serif; margin: 0px;line-height: 150%;}

q:lang(no){quotes:'"' '"';}

a {font: 2.5vh Playfair display, bold, Verdana, sans-serif;}
a.k {font: italic 2vmin Source, sans-serif;}
a.t {font: 2vmin Source, sans-serif;}

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.topnav{
	grid-area: topnav;
}
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #001f0f;
  border-radius: 0px 0px 20px 20px;
}
ul.nav li {float: left; text-align: center;}
ul.nav li a {
  display: block;
  background-color: #001f0f;
  color: #BED2E7;
  text-align: center;
  border-radius: 0px;
  padding: 25px 50px;
  text-decoration: none;
  overflow: none;
}
ul.nav li a:hover, ul.nav li a:active  {background-color: #BED2E7; color:#3B0024;}

a.button:link, a.button:visited {
  background-color: #BED2E7;
  color: #001f0f;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-grid;
  margin: 1em;
}
a.button:hover, a.button:active {background-color: #BED2E7; color:#3B0024;}

button {
  background-color: #001f0f;
  color: #BED2E7;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  border: none;
  display: inline-grid;
  margin: 1em;
}
button:hover, button:active {background-color: #3B0024; color:#BED2E7;}

header h1{
  overflow: none;
  font-size:3vw;
  text-align: center;
}  

/*tablet*/
@media only screen and (max-width: 1200px){
	.container-grid{
	display: grid;
 	 /*height: 100vh;*/
 	 /*grid-template-columns: repeat (3,1Fr);*/
 	 grid-template-columns: 1fr 1fr ;
 	 grid-gap: 3em;
 	 /*grid-auto-rows: minmax(0px, 1fr);*/
 	 grid-template-rows: 0.2fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.2fr 0.5fr 0.5fr 0.2fr 0.3fr 0.2fr 0.5fr 0.4fr ;
 	 grid-template-areas:
 		"topnav topnav"
  	"content2 content1"
  	"content4 content3"
  	"content6 content5"
  	"content9 content7"
  	"content10 content10"
  	"content11 content11"
  	"content12 content12"
  	"content13 content14"
  	"content15 content15"
 	"content16 content18"
 	"content17 content17"
  	"content8 content8"
  	"footer footer";
  	margin: 0px 20px;
	}
}	
/*smart phone*/
@media only screen and (max-width: 768px){
	.container-grid{
		grid-template-columns: 1fr;
		grid-gap: 1em;
		grid-row-gap: 1em;
		grid-template-rows:0.2fr 0.2fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.2fr 0.2fr 0.2fr 0.2fr 0.5fr 0.3fr;
		grid-template-areas: 
		"topnav"
		"content1"
		"content2"
		"content3"
		"content4"
		"content5"
		"content6"
		"content7"
		"content10"
		"content9"
		"content11"
		"content12"
		"content13"
		"content14"
		"content15"
		"content16"
		"content17"
		"content18"
		"content8"
		"footer";
		margin: 0px;
	}
h1 {font: 5vw Playfair display, bold, Verdana, sans-serif; line-height: 130%;}

h2 {font: 3.0vh Playfair display, bold, Verdana, sans-serif;line-height: 130%;}

h2.l {font: 3.5vh Playfair display, bold, Verdana, sans-serif; margin: 0px;line-height: 130%;}

h2.k {font: italic 3vmin Source, sans-serif;line-height: 150%; }

p {font: 3vmin Source, sans-serif, Arial, sans-serif; line-height: 150%;}

p.l {font: 2.8vmin Source, sans-serif, Arial, sans-serif; margin: 0px;line-height: 150%;}

q:lang(no){quotes:'"' '"';}

a {font: 2.7vh Playfair display, bold, Verdana, sans-serif;}
a.k {font: italic 3vmin Source, sans-serif;}
a.t {font: 3vmin Source, sans-serif;}

ul.nav li a {
  padding: 20px 30px;}
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #001f0f;
  color: #ffffff;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


.container {
  padding: 30px;
}

.content8{
	grid-area: content8;
	padding: 30px;
	font-size: 1.3rem;
	align-items: center;
	border: 3px solid #001f0f;
	background-color: #CEE2F4;
	margin: 50px;
}

.container-rev{
	padding: 30px;
	font-size: 1.3rem;
	align-items: center;
	background-color: #001f0f;
}

.content1 {
	grid-area: content1;
	align-self: end;
}
.content2 {
	grid-area: content2;
	background: url("../images/2.jpg");
	background-size: cover;
	background-position: center;
}
.content3 {
	grid-area: content3;
	align-self: end;
}
.content4 {
	grid-area: content4;
	background: url("../images/7.jpg");
	background-size: cover;
	background-position: top;
}
.content5 {
	grid-area: content5;
	align-self: end;
}
.content6 {
	grid-area: content6;
	background: url("../images/6.jpg");
	background-size: cover;
	background-position: center;
}
.content7 {
	grid-area: content7;
	padding-bottom: 0px;
	align-self: end;
}

.content9 {
	grid-area: content9;
	background: url("../images/4.jpg");
	background-size: cover;
	background-position: center;
	}
.content10 {
	grid-area: content10;
	background: url("../images/5.jpg");
	background-size: cover;
	background-position: center;
}
.content11 {
	grid-area: content11;
	padding-bottom: 0px;
	align-self: end;
}
.content12 {
	grid-area: content12; 
	background: url("../images/9.jpg");
	background-size: cover;
	background-position: bottom;
}
.content13 {
	grid-area: content13;
	align-self: end;
}
.content14 {
	grid-area: content14; 
	background: url("../images/8.jpg");
	background-size: cover;
	background-position: center;
	text-align: center;
}
.content15 {
	grid-area: content15;
	background-color: #001f0f;
	text-align: center;
}
.content16 {
	grid-area: content16;
	padding-top: 0px;
}
.content17 {
	grid-area: content17;
	padding-top: 0px;
}
.content18 {
	grid-area: content18;
	padding-top: 0px;
}

footer{
	grid-area: footer;
	background-color: #001f0f;
	padding-top: 40px;
	align-self: end;
	border-radius: 20px 20px 0px 0px;
	text-align: center;
}